<template>
  <div>
    <div class="panel">
      <text class="text1 normal-size">今日实时数据<text class="text4 small-size"></text></text>
      <div class="data-content">
        <text class="text3 small-size">注册用户数<text class="text5 small-size">{{todayData.registerUserTotal}}</text></text>
        <text class="text3 small-size">未绑定租户用户数<text class="text5 small-size">{{todayData.unbindUserTotal}}</text></text>
        <text class="text3 small-size">租户数<text class="text5 small-size">{{todayData.tenantTotal}}</text></text>
        <text class="text3 small-size">上线小区数<text class="text5 small-size">{{todayData.communityTotal}}</text></text>
        <text class="text3 small-size">未上线小区数<text class="text5 small-size">{{todayData.unbindCommunityTotal}}</text></text>
        <text class="text3 small-size">房屋总数<text class="text5 small-size">{{todayData.roomTotal}}</text></text>
        <text class="text3 small-size">业主总数<text class="text5 small-size">{{todayData.residentTotal}}</text></text>
        <text class="text3 small-size">缴费总笔数<text class="text5 small-size">{{todayData.paymentRowTotal}}</text></text>
        <text class="text3 small-size">缴费总金额<text class="text5 small-size">{{todayData.paymentTotal}}</text></text>
        <text class="small-size inall">其中：</text>
        <text class="text3 small-size">支付宝缴费总笔数<text class="text5 small-size">{{todayData.alipayPaymentRowTotal}}</text></text>
        <text class="text3 small-size">支付宝缴费总金额<text class="text5 small-size">{{todayData.alipayPaymentTotal}}</text></text>
      </div>
    </div>
	  <div class="panel">
		  <div id="container" class="container" style="width: 100%; height: 250px; margin-top: 15px"></div>
	  </div>
    <div class="panel">
      <text class="text1 normal-size">历史数据统计<text class="text4 small-size"></text></text>
      <div class="data-content" v-for="(item, i) in historyData">
        <text class="text3 small-size text-data data-content-item-data" @click="showdetail(i)">统计日期<text class="arrow">  ></text><text class="text5 small-size text-data">{{item.date}}</text></text>
        <div class="data-content-item">
          <text class="text3 small-size">注册用户数<text class="text5 small-size">{{item.registerUserTotal}}</text></text>
          <text class="text3 small-size">未绑定租户用户数<text class="text5 small-size">{{item.unbindUserTotal}}</text></text>
          <text class="text3 small-size">租户数<text class="text5 small-size">{{item.tenantTotal}}</text></text>
          <text class="text3 small-size">上线小区数<text class="text5 small-size">{{item.communityTotal}}</text></text>
          <text class="text3 small-size">未上线小区数<text class="text5 small-size">{{item.unbindCommunityTotal}}</text></text>
          <text class="text3 small-size">房屋总数<text class="text5 small-size">{{item.roomTotal}}</text></text>
          <text class="text3 small-size">业主总数<text class="text5 small-size">{{item.residentTotal}}</text></text>
          <text class="text3 small-size">缴费总笔数<text class="text5 small-size">{{item.paymentRowTotal}}</text></text>
          <text class="text3 small-size">缴费总金额<text class="text5 small-size">{{item.paymentTotal}}</text></text>
          <text class="small-size inall">其中：</text>
          <text class="text3 small-size">支付宝缴费总笔数<text class="text5 small-size">{{item.alipayPaymentRowTotal}}</text></text>
          <text class="text3 small-size">支付宝缴费总金额<text class="text5 small-size">{{item.alipayPaymentTotal}}</text></text>
        </div>
       </div>
    </div>
  </div>
</template>
<script>
  var dingtalk = require('weex-dingtalk');
  const dd = dingtalk.apis;
  const modal = weex.requireModule('modal')

  const getData = _webpath + '/stathistory/ajax/select';
  export default {
    data () {
      return {
        showLoading: 'hide',
        todayData: {},
        historyData: [],
        keyWords: '',
        pageNum: 1,
        onfocus: false,
        activeIndex: undefined,
      }
    },
    mounted: function(){
      dingtalk.ready(function(){
        // 设置导航
        const dd = dingtalk.apis;
        dd.biz.navigation.setTitle({
          title: '系统数据统计'
        });
      });
      this.getList();
    },
    methods: {
      getList: function(){
        var self = this;
        $.ajax({
          type: 'POST',
          url: getData,
          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
          data:  {},
          success : function(data) {
            if(data.messageType == 'FAIL') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'WARN') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'SUCCESS') {
              /*dd.device.notification.hidePreloader({
                onSuccess : function(result) {},
                onFail : function(err) {}
              });*/
              self.todayData = JSON.parse(data.messageContent);
              var list = [];
              for (var i = 0;i<data.valueObj.valueList.length;i++) {
                list.push(JSON.parse(data.valueObj.valueList[i].content));
              }
              self.historyData = self.historyData.concat(list);
                var dateList = [];
	            var charList = [{
	              name: '支付宝缴费总金额',
	              color: '#4572A7',
	              yAxis: 0,
	              data: []
	            }, {
	              name: '缴费总金额',
	              color: '#eea236',
	              yAxis: 0,
	              data: []
	            }, {
	              name: '上线小区数',
	              color: '#89A54E',
	              yAxis: 1,
	              data: []
	            }];
	            for (var k = self.historyData.length - 1; k >= 0; k--) {
	              charList[0].data.push(parseFloat((self.historyData[k].alipayPaymentTotal / 10000).toFixed(2)));
	              charList[1].data.push(parseFloat((self.historyData[k].paymentTotal / 10000).toFixed(2)));
	              charList[2].data.push(self.historyData[k].communityTotal / 1);
	              dateList.push(self.historyData[k].date);
	            }
	            Highcharts.chart('container', {
	              chart: {
	            	  type: 'spline'
	              },
	              title: {
	                text: ''
	              },
	              xAxis: [{
	                categories: dateList,
	                labels: {
	                  rotation: 0,
	                  align: 'right',
	                  style: { 
	                	  font: 'normal 12px 宋体',
	                  },
	                  x: 30,
		              useHTML: true
	                },
	                tickInterval: self.historyData.length - 1
	              }],
	              yAxis: [{ // Primary yAxis
	                title: {
	                  text: '金额 (万元)',
	                  style: {
	                    color: '#89A54E',
	                    fontSize: '12px'
	                  },
		               useHTML: true
	                },
	                labels: {
	                  format: '{value}', //格式化Y轴刻度
	                  style: {
	                    color: '#89A54E',
	                    fontSize: '12px'
	                  },
		               useHTML: true
	                }
	              }, { // Secondary yAxis
	                title: {
	                  text: '小区数 (个)',
	                  style: {
	                    color: '#4572A7',
	                    fontSize: '12px'
	                  },
		               useHTML: true
	                },
	                labels: {
	                  format: '{value}',
	                  style: {
	                    color: '#4572A7'
	                  },
		               useHTML: true
	                },
	                opposite: true
	              }],
	              legend: {
	                //layout: 'vertical',
	                align: 'center',
	                //verticalAlign: 'middle',
	                useHTML: true
	              },  
	              tooltip: {
	                enabled: true,
	                formatter: function() {  
	                	return this.x + '</br> ' + this.series.name + ' '+this.y;  
                	},
	                useHTML: true
	              },
	              series: charList,
	              plotOptions: {
					  series: {
					    events: {
					        legendItemClick: function(e) {
					            return false; // 直接 return false 即可禁用图例点击事件
					        }
					    }
					  }
				  }, 
	              credits: {
	                enabled: false // 禁用版权信息
	              },
	              responsive: {
	                rules: [{
	                  condition: {
	                    maxWidth: 500
	                  },
	                  chartOptions: {
	                    legend: {
	                      layout: 'horizontal',
	                      align: 'center',
	                      verticalAlign: 'bottom'
	                    }
	                  }
	                }]
	              }
	            });
            }
          },
          error : function(xhr, errorType, error) {

          }
        });

      },
      showdetail (i) {
        if (i == this.activeIndex && $($('.data-content-item')[i]).css('display') == 'none') {
          $($('.data-content-item')[i]).css('display', 'flex');
          $($('.arrow')[i]).html('  v');
        }
        else {
          $('.data-content-item').css('display', 'none');
          $($('.arrow')).html('  >');
          if (i != this.activeIndex) {
            $($('.data-content-item')[i]).css('display', 'flex');
            $($('.arrow')[i]).html('  v');
            this.activeIndex = i;
          }
        }
      },
    }
  }
</script>
<style scoped>
  .panel {
    width: 100%;
  }
  .text1 {
    display: inline-block;
    padding: 16px;
    line-height: 36px;
    font-weight: 500;
    color: #555;
    background: #f4f4f4;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
  }
  .text2 {
    display: inline-block;
    position: absolute;
    bottom: 8px;
    font-size: 20px;
  }
  .text-data {
    color: #38adff;
  }
  .text3 {
    display: inline-block;
    padding: 0 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
    line-height: 68px;
  }
  .text4 {
    display: inline-block;
    color: #999;
    vertical-align:bottom;
  }
  .text5 {
    display: inline-block;
    float: right;
    line-height: 68px;
    color: #999;
  }
  .arrow {
    display: inline-block;
    float: right;
    top: -2px;
    line-height: 68px;
    color: #38adff;
  }
  .inall {
    display: inline-block;
    padding: 0 20px;
    background: #f4f4f4;
    line-height: 68px;
  }
  .data-content {
    //padding: 0 20px
  }
  .data-content-item {
    display: none;
  }
  .data-content-item-active {
    display: flex !important;
  }
</style>